<template>
  <el-card :body-style="{ padding: '0px' }">
    <div class="container" ref="target">文档云图</div>
  </el-card>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getChartWordCloud } from '@/api/chart'
import * as echarts from 'echarts'
import 'echarts-wordcloud'
import { useI18n } from 'vue-i18n'
import { watchSwitchLang } from '@/utils/i18n'
import { randomRGB } from '@/utils/color'
import wordcloudBg from '@/assets/wordcloud.png'

const i18n = useI18n()

// 获取数据
const wordCloudData = ref([])
const getWordCloudData = async () => {
  const res = await getChartWordCloud()
  wordCloudData.value = res
  renderChart()
}
getWordCloudData()

// 图表
const target = ref(null)
let myChart
onMounted(() => {
  myChart = echarts.init(target.value)
})

const renderChart = () => {
  const maskImage = new Image()
  maskImage.src = wordcloudBg
  const options = {
    title: {
      text: i18n.t('msg.chart.cloudChartTitle')
    },
    series: [
      {
        type: 'wordCloud',
        sizeRange: ['4', '80'],
        rotationRange: ['0', '90'],
        maskImage,
        gridSize: 0,
        layoutAnimation: true,
        textStyle: {
          color: randomRGB
        },
        emphasis: {
          textStyle: {
            fontWeight: 'bold',
            color: '#000'
          }
        },
        data: wordCloudData.value
      }
    ]
  }
  maskImage.onload = function () {
    myChart.setOption(options)
  }
}

watchSwitchLang(getWordCloudData)
</script>

<style scoped lang="scss">
.container {
  height: 240px;
}
</style>
